<!--密封点照片信息-->
<template>
	<view  class="point">
	<view class="mongolia" id="mongolia" @click.stop="creat_point">
		<image  src="/static/deviceImg/cccccc.jpeg" style="width:100%;height:100%"  mode="aspectFit"></image>
		<view class="marker" v-for="(item,index) in markerArr"
		               :key="index" :style="{left:item.x,top:item.y}" 
		               @click.stop="del_poit(index)">
					   标记点
		           </view>
	</view>
	</view>
	<view class="operation-button">
		<view class="photo-button"></view>
		<view class="list-button"></view>
		<view class="save-button"></view>
	</view>
</template>

<script setup>
	import {ref} from "vue"
	import Listscroll from "@/components/list-scroll/list-scroll.vue"
	import {
		    onLoad,
		  } from "@dcloudio/uni-app"
    const imageUrl = ref("/static/deviceImg/cccccc.jpeg")
  const markerArr = ref([
	  {x:'100rpx',y:'100rpx'},{x:'200rpx',y:'200rpx'},{x:'300rpx',y:'300rpx'}
  ])
  const markerArr1 = ref([
  	  {x:'90rpx',y:'110rpx'},{x:'180rpx',y:'210rpx'},{x:'210rpx',y:'310rpx'}
  ])
  const gobackList = () =>{}
  const takePhotos = () =>{}
  const savePhotoInformation = () =>{}
   // 打点 
    const  creat_point =(e) =>{
              e = e || window.event;
              let x = e.offsetX || e.layerX;
              let y = e.offsetY || e.layerY;
              let obj = {
                  x:x + 'rpx',
                  y:y + 'rpx',
              }
             markerArr.value.push(obj);
          }
          // 删除点
        const  del_poit = (index) =>{
              markerArr.value.splice(index,1);
          }
</script>

<style lang="scss" scoped>
	.operation-button{
		position: absolute;
		left:30%;
		display: flex;
		flex-direction: row;
		margin-top: 60rpx;
		.photo-button{
			width:50rpx;
			height:50rpx;
			background-image:url('@/static/deviceImg/take-photo.png') ;
			background-size: 100% 100%;
			cursor: pointer;
			//width:40rpx;
			// height:30rpx;
			// display: inline-block;
			// padding: 4rpx 8rpx;
			// background: #00aaff;
			// border:2rpx solid #00aaff;
			// color: #ffffff;
			// border-radius: 10rpx;
			// font-size: 20rpx;
			margin-left: 30rpx;
		}
		.list-button{
			width:50rpx;
			height:50rpx;
			background-image:url('@/static/deviceImg/list-button.png') ;
			background-size: 100% 100%;
			margin-left: 30rpx;
			cursor: pointer;
			//width:40rpx;delete-button.png
			// height:30rpx;
			// margin-left: 10rpx;
			// display: inline-block;
			// padding: 4rpx 8rpx;
			// background: #fef0f0;
			// border:2rpx solid #fde2e2;
			// color: rgb(251, 69, 59);
			// border-radius: 10rpx;
			// font-size: 20rpx;
		}
		.save-button{
			width:50rpx;
			height:50rpx;
			background-image:url('@/static/deviceImg/save-button.png') ;
			background-size: 100% 100%;
			cursor: pointer;
				margin-left: 30rpx;
			// display: inline-block;
			// padding: 4rpx 8rpx;
			// background: #00aaff;
			// border:2rpx solid #00aaff;
			//color: #ffffff;
			// border-radius: 10rpx;
			// font-size: 20rpx;
		}
	}
    .pointer-content{
		
	}
	.point{
	    width: 710rpx;
	    height: 1000rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
	    .mongolia{
	       width: 100%;
	       height: 100%;
	        background: rgba(0, 0, 0, 0.4);
	        position:relative;
	        .marker{
	            width: 100rpx;
	            height: 50rpx; 
	            position: absolute;
	            background:#455bdf;
	        }
	    }
	}
</style>